<template>
  <div class="container">
    <div class="content box box-ac box-jc">
      <!-- <img class="loading-img" :src="loadingImg" alt=""> -->
      <div class="loader">
        <div class="loader-inner line-scale">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
    name: 'loading',
    data () {
        return {
        // loadingImg: require('../assets/images/loading-spin.svg')
        };
    }
};
</script>

<style lang="scss" scoped>
$themeColor:#3a9aff;
.container{
  position: absolute;
  z-index: 88;
  left:0;
  top:0;
  width:100%;
  height:100%;
  .content{
    height:100%;
    width:100%;
    .loader{
       margin:auto;
    }
  }
}
.loading-img{
  display: block;
  width:.8rem;
  height:.8rem;
}

@keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.line-scale > div:nth-child(1) {
  -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(2) {
  -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(3) {
  -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(4) {
  -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(5) {
  -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div {
  background-color: $themeColor;
  width: .08rem;
  height: .6rem;
  border-radius: .04rem;
  margin: .02rem;
  animation-fill-mode: both;
  display: inline-block;
}

// @keyframes line-scale-pulse-out {
//   0% {
//     -webkit-transform: scaley(1);
//             transform: scaley(1); }

//   50% {
//     -webkit-transform: scaley(0.4);
//             transform: scaley(0.4); }

//   100% {
//     -webkit-transform: scaley(1);
//             transform: scaley(1); } }

// .line-scale-pulse-out > div {
//   background-color: #fff;
//   width: 4px;
//   height: 35px;
//   border-radius: 2px;
//   margin: 2px;
//   -webkit-animation-fill-mode: both;
//           animation-fill-mode: both;
//   display: inline-block;
//   -webkit-animation: line-scale-pulse-out 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
//           animation: line-scale-pulse-out 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85); }
//   .line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
//     -webkit-animation-delay: 0.2s !important;
//             animation-delay: 0.2s !important; }
//   .line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
//     -webkit-animation-delay: 0.4s !important;
//             animation-delay: 0.4s !important; }

</style>
